<!--订单页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">订单列表</span>
  </div>
  <el-tabs v-model="activeName" class="custom-tabs" style="font-size: 20px;">
    <!--    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">-->
    <el-tab-pane label="待支付" name="first" >
      <!-- 待支付列表 搜索卡片 -->
      <el-card style="margin: 20px;">
        <el-form style="padding-top:10px;">
          <el-row :gutter="30">
            <el-col :span="4">
              <el-form-item label="创建起始时间">
                <el-date-picker
                    v-model="searchApplication.startTime"
                    placeholder="选择开始时间"
                    type="datetime"
                    value-format="YYYY/MM/DD HH:mm:ss"
                    style="width: 100%;"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="创建结束时间">
                <el-date-picker
                    v-model="searchApplication.endTime"
                    type="datetime"
                    placeholder="选择结束时间"
                    value-format="YYYY/MM/DD HH:mm:ss"
                    style="width: 100%;"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="订单编号">
                <el-input placeholder="请输入出发地" v-model="searchApplication.code"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="关联竞价编号">
                <el-input placeholder="关联竞价编号" v-model="searchApplication.linkedCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="配送方式">
                <el-select placeholder="请选择" v-model="searchApplication.getWay">
<!--                  <el-option v-for="item in appOptions" :label="item.label" :value="item.value"></el-option>-->
                                <el-option label="快递" value="10"></el-option>
                                <el-option label="自提" value="20"></el-option>
                                <el-option label="移到云仓" value="30"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col  v-if="false">
              <el-form-item label="状态">
                <el-input placeholder="请选择" v-model="searchApplication.status" value="0">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button @click="resetSearch">重置</el-button>
                <el-button type="primary" @click="loadApplication">查询</el-button>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
      </el-card>
      <!-- 订单表格 -->
      <el-card style="margin:20px">
        <el-table :data="tableData">
          <el-table-column type="index" width="80" align="center" prop="id" label="编号"></el-table-column>
          <el-table-column align="center" prop="username" label="创建时间"></el-table-column>
          <el-table-column align="center" prop="departureAddr" label="订单编号"></el-table-column>
          <el-table-column align="center" prop="destinationAddr" label="关联竞价单号"></el-table-column>
          <el-table-column align="center" prop="reason" label="销售数量"></el-table-column>
          <el-table-column align="center" prop="auditUsernameList" label="配送方式"></el-table-column>
          <el-table-column align="center" prop="startTime" label="应付金额"></el-table-column>
          <el-table-column align="center" prop="endTime" label="支付剩余时间"></el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" link
                         :disabled="scope.row.status!=10" @click="cancel(scope.row.id)">撤销
              </el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-card>
    </el-tab-pane>
    
    <el-tab-pane label="已支付" name="second">
      <!-- 已支付列表 搜索卡片 -->
      <div style="padding: 0; background-color: rgb(230, 247, 255);border: 1px solid rgb(145, 213, 255) ;border-radius: 10px "><h2>提示：已支付的订单可以到左边菜单栏【我的包裹】中查看所有待收包裹信息</h2></div>
      <el-card style="margin: 20px;">
        <el-form style="padding-top:10px;">
          <el-row :gutter="30">
            <el-col :span="4">
              <el-form-item label="创建起始时间">
                <el-date-picker
                    v-model="searchApplication.startTime"
                    placeholder="选择开始时间"
                    type="datetime"
                    value-format="YYYY/MM/DD HH:mm:ss"
                    style="width: 100%;"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="创建结束时间">
                <el-date-picker
                    v-model="searchApplication.endTime"
                    type="datetime"
                    placeholder="选择结束时间"
                    value-format="YYYY/MM/DD HH:mm:ss"
                    style="width: 100%;"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="订单编号">
                <el-input placeholder="请输入出发地" v-model="searchApplication.code"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="关联竞价编号">
                <el-input placeholder="关联竞价编号" v-model="searchApplication.linkedCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="配送方式">
                <el-select placeholder="请选择" v-model="searchApplication.getWay">
                  <!--                  <el-option v-for="item in appOptions" :label="item.label" :value="item.value"></el-option>-->
                  <el-option label="快递" value="10"></el-option>
                  <el-option label="自提" value="20"></el-option>
                  <el-option label="移到云仓" value="30"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col  v-if="false">
              <el-form-item label="状态">
                <el-input placeholder="请选择" v-model="searchApplication.status" value="1">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button @click="resetSearch">重置</el-button>
                <el-button type="primary" @click="loadApplication">查询</el-button>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
      </el-card>
      <!-- 订单表格 -->
      <el-card style="margin:20px">
        <el-table :data="tableData">
          <el-table-column type="index" width="80" align="center" prop="id" label="编号"></el-table-column>
          <el-table-column align="center" prop="username" label="创建时间"></el-table-column>
          <el-table-column align="center" prop="departureAddr" label="订单编号"></el-table-column>
          <el-table-column align="center" prop="destinationAddr" label="关联竞价单号"></el-table-column>
          <el-table-column align="center" prop="reason" label="支付数量"></el-table-column>
          <el-table-column align="center" prop="auditUsernameList" label="配送方式"></el-table-column>
          <el-table-column align="center" prop="startTime" label="应付金额"></el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" link
                         :disabled="scope.row.status!=10" @click="cancel(scope.row.id)">撤销
              </el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-card>
    </el-tab-pane>
    
    <el-tab-pane label="已取消" name="third">
      <!-- 已取消列表 搜索卡片 -->
      <el-card style="margin: 20px;">
        <el-form style="padding-top:10px;">
          <el-row :gutter="30">
            <el-col :span="4">
              <el-form-item label="创建起始时间">
                <el-date-picker
                    v-model="searchApplication.startTime"
                    placeholder="选择开始时间"
                    type="datetime"
                    value-format="YYYY/MM/DD HH:mm:ss"
                    style="width: 100%;"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="创建结束时间">
                <el-date-picker
                    v-model="searchApplication.endTime"
                    type="datetime"
                    placeholder="选择结束时间"
                    value-format="YYYY/MM/DD HH:mm:ss"
                    style="width: 100%;"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="订单编号">
                <el-input placeholder="请输入出发地" v-model="searchApplication.code"></el-input>
              </el-form-item>
            </el-col>
            <el-col  v-if="false">
              <el-form-item label="状态">
                <el-input placeholder="请选择" v-model="searchApplication.status" value="1">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="关联竞价编号">
                <el-input placeholder="关联竞价编号" v-model="searchApplication.linkedCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="配送方式">
                <el-select placeholder="请选择" v-model="searchApplication.getWay">
                  <!--                  <el-option v-for="item in appOptions" :label="item.label" :value="item.value"></el-option>-->
                  <el-option label="快递" value="10"></el-option>
                  <el-option label="自提" value="20"></el-option>
                  <el-option label="移到云仓" value="30"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button @click="resetSearch">重置</el-button>
                <el-button type="primary" @click="loadApplication">查询</el-button>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
      </el-card>
      <!-- 订单表格 -->
      <el-card style="margin:20px">
        <el-table :data="tableData">
          <el-table-column type="index" width="80" align="center" prop="id" label="编号"></el-table-column>
          <el-table-column align="center" prop="username" label="创建时间"></el-table-column>
          <el-table-column align="center" prop="departureAddr" label="订单编号"></el-table-column>
          <el-table-column align="center" prop="destinationAddr" label="关联竞价单号"></el-table-column>
          <el-table-column align="center" prop="reason" label="取消数量"></el-table-column>
          <el-table-column align="center" prop="auditUsernameList" label="配送方式"></el-table-column>
          <el-table-column align="center" prop="startTime" label="合计"></el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" link
                         :disabled="scope.row.status!=10" @click="cancel(scope.row.id)">撤销
              </el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-card>
    </el-tab-pane>
  </el-tabs>
  <!-- 弹窗 -->
  <!--  <el-dialog title="创建申请单" v-model="addApplicationDialogVisible"
               style="width:1000px;padding:40px;" :before-close="handleClose">
      <el-form label-width="80px" label-position="top">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="用车人">
              <el-input readonly :value="user.username"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用时间">
              <el-date-picker
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  format="YYYY-MM-DD HH:mm:ss"
                  v-model="times"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="车辆出发地">
              <el-input placeholder="请输入" v-model="addForm.departureAddr"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆目的地">
              <el-input placeholder="请输入" v-model="addForm.destinationAddr"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="用车事由">
              <el-input placeholder="请输入" type="textarea" resize="none" :rows="3"  v-model="addForm.reason"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input placeholder="请输入" type="textarea" resize="none" :rows="3" v-model="addForm.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="驾照">
              <el-upload
                  v-model:file-list="fileList"
                  v-model:action="actionUrl"
                  name="file"
                  limit="1"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
              >
                <el-icon>
                  <Plus/>
                </el-icon>
              </el-upload>
              <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl"/>
              </el-dialog>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审批人">
              <el-row :gutter="10">
                <el-col :span="12" v-if="auditUserOpts.length>0">
                  <el-tag type="primary">
                    <el-icon style="margin-right:5px;position:relative;top:2px;">
                      <User/>
                    </el-icon>
                    <span>{{auditUserOpts[0].username}}</span>
                  </el-tag>
                </el-col>
                <el-col :span="12" v-if="auditUserOpts.length>1">
                  <el-tag type="primary">
                    <el-icon style="margin-right:5px;position:relative;top:2px;">
                      <User/>
                    </el-icon>
                    <span>{{auditUserOpts[1].username}}</span>
                  </el-tag>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="addApplication">确定</el-button>
      </template>
    </el-dialog>-->


</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
/*变量*/
//定义存放订单列表数据
const tableData = ref([]);
//定义搜索数据
const searchApplication = ref({

  startTime: "",
  endTime: "",
  code: "",
  linkedCode: "",
  getWay: "",
  status: ""
});
const activeName = ref('first');

/*方法*/
//重置搜索
const resetSearch = () => {
  loadApplication();
  searchApplication.value = {
    startTime: "",
    endTime: "",
    code: "",
    linkedCode: "",
    getWay: "",
  };
};
//搜索
const loadApplication = () => {
  /*axios.get("/api/order/list", {
        params: {
          startTime: searchApplication.value.startTime,
          endTime: searchApplication.value.endTime,
          code: searchApplication.value.code,
          linkedCode: searchApplication.value.linkedCode,
          getWay: searchApplication.value.getWay,
        },
      })
      .then((res) => {
        tableData.value = res.data.data;
      })*/
}
//进入页面触发
onMounted(() => {
  loadApplication();
});




</script>

<style scoped>

/* 自定义 tabs 容器样式 */
.custom-tabs {
  /* 调整整体布局或间距 */
  margin-top: 20px;
  margin-left: 20px;
}

/* 使用 :deep() 穿透作用域样式 */
:deep(.el-tabs__nav-wrap::after) {
  /* 移除默认的下边线 */
  background-color: transparent;
}

:deep(.el-tabs__item) {
  /* 调整标签页字体大小、颜色等 */
  font-size: 20px;
  color: grey;
}

:deep(.el-tabs__item.is-active) {
  /* 激活状态下的样式 */
  color: rgb(128, 132, 231);
  font-weight: bold;
}

:deep(.el-tabs__active-bar) {
  /* 调整激活状态下的下划线样式 */
  background-color: rgb(128, 132, 231);
}

</style>